import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex, message } from 'antd';

import request from '@/utils/Request'
import { useUserStore } from '@/store';

const LoginForm = () => {
  const { user, setUser } = useUserStore()
  const onFinish = (values) => {
    request.post('/mock/login', {...values}).then((res) => {
      console.log(res)
      if (res.code === 200) {
        message.success(res.message || '登录成功')
        localStorage.setItem('xxx-token', res.data.token)
        setUser(res.data.user)
        window.location.href = '#/app/test1'
        return
      }
      setUser(null)
      message.error(res.message || '登录失败') 
    })
  };
  return (
    <Form
      name="login"
      initialValues={{
        remember: true,
      }}
      style={{
        width: '85%'
      }}
      onFinish={onFinish}
    >
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your Username!',
          },
        ]}
      >
        <Input prefix={<UserOutlined />} placeholder="Username" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your Password!',
          },
        ]}
      >
        <Input prefix={<LockOutlined />} type="password" placeholder="Password" />
      </Form.Item>
      <Form.Item>
        <Flex justify="space-between" align="center">
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>
          <a href="">Forgot password</a>
        </Flex>
      </Form.Item>

      <Form.Item>
        <Button block type="primary" htmlType="submit">
          Log in
        </Button>
        or <a href="">Register now!</a>
      </Form.Item>
    </Form>
  );
};
export default LoginForm;